<template>
  <div class="playlist">
    <header>
      <div class="left" @click="back()">
        <i></i>
      </div>
      <div class="center">歌单广场</div>
    </header>
    <div class="main">
      <div class="content" v-if="tabs_flag">
        <!--标题-->
        <div class="header">
          <i class="menu" @click.self="menu()"></i>
          <div class="tabs-warp">
            <div ref="tabsContent" class="tabs-content mescroll-touch-x">
              <div style="display: inline-block">
                <!--PC端运行,加上这个div可修复tab-bar错位的问题 -->
                <ul class="tabs" ref="tabs">
                  <li
                    class="tab"
                    v-for="(tab,i) in tabs"
                    :class="{active: i===curIndex}"
                    :style="{width: tabWidth+'rem'}"
                    :key="i"
                    @click="changeTab(i)"
                  >{{tab.name}}</li>
                </ul>
                <div class="tab-bar" :style="{width: barWidth+'rem', left: barLeft}"></div>
              </div>
            </div>
          </div>
        </div>
        <!--轮播-->
        <div class="swiper-container swiper-container-g">
          <div class="swiper-wrapper" ref="mySwiper">
            <div class="swiper-slide" v-for="(tab,i) in tabs" :key="i">
              <div class="boutique" v-show="i == 2">
                <div class="left">
                  <span>全部</span>
                </div>
                <div class="right">
                  <span>
                    <i></i>
                    <b>筛选</b>
                  </span>
                </div>
              </div>
              <mescroll-vue
                :ref="'mescroll'+i"
                :down="getMescrollDown(i)"
                :up="getMescrollUp(i)"
                @init="mescrollInit(i,arguments)"
              >
                <div class="rec_swiper" v-show="i == 0">
                  <div class="swiper-container swiper-container-m">
                    <div class="swiper-wrapper">
                      <div class="swiper-slide" v-for="(item,index) in swiper_data" :key="index">
                        <div class="top">
                          <img :src="item.coverImgUrl" alt />
                          <i></i>
                        </div>
                        <p class="info el2">{{item.name}}</p>
                      </div>
                    </div>
                  </div>
                </div>
                <ul :id="'dataList'+i">
                  <li class="data-li" v-for="pd in tabs[i].list" :key="pd.id">
                    <v-playlist-card
                      :top_left="top_left"
                      :src="pd.coverImgUrl"
                      :info="pd.name"
                      :count="pd.playCount"
                    ></v-playlist-card>
                  </li>
                </ul>
              </mescroll-vue>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// 引入mescroll的vue组件
import MescrollVue from "mescroll.js/mescroll.vue";
import Swiper from "swiper";
import vPlaylistCard from "@/components/playlist_card";
import { mapState } from "vuex";
export default {
  components: {
    vPlaylistCard,
    MescrollVue // Mescroll组件
  },
  data() {
    return {
      tabs: [
        {
          name: "推荐",
          mescroll: null,
          list: [],
          isListInit: false
        },
        {
          name: "官方",
          mescroll: null,
          list: [],
          isListInit: false
        },
        {
          name: "精品",
          mescroll: null,
          list: [],
          isListInit: false
        }
      ],
      tabWidth: 1.6, // 每个tab的宽度
      barWidth: 0.8, // tab底部红色线的宽度
      curIndex: 0, // 当前tab的下标
      tabScrollLeft: 0, // 菜单滚动条的位置
      mySwiper_banner: null,
      tabs_flag: false,
      swiper_data: [],
      top_left: false, //精品顶部左上角
      catTag: "全部", //精品tag
      before: "" //精品下一页
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    }
  },
  computed: {
    ...mapState("playlist_catlist", ["playlist_catlist_data"]),
    barLeft() {
      // 红线的位置
      return (
        this.tabWidth * this.curIndex +
        (this.tabWidth - this.barWidth) / 2 +
        "rem"
      );
    }
  },
  created() {
    this.$store
      .dispatch("playlist_catlist/getPlaylistCatlistData", {})
      .then(data => {
        data.sub.forEach(element => {
          let obj = {
            name: "",
            mescroll: null,
            list: [],
            isListInit: false
          };
          if (element.type == 0) {
            obj.name = element.name;
            this.tabs.push(obj);
          }
        });
        this.tabs_flag = true;

        this.$nextTick(() => {
          this.mySwiper_banner = new Swiper(".swiper-container-g", {
            // 轮播配置
            on: {
              transitionEnd: () => {
                this.changeTab(this.mySwiper_banner.activeIndex);
              }
            }
          });
        });
      });
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    menu() {
      this.$router.push({ name: "PlaylistTag" });
    },
    // 多mescroll的配置,需通过方法获取,保证每个配置是单例
    getMescrollDown(tabIndex) {
      let isAuto = tabIndex === 0; // 第一个mescroll传入true,列表自动加载
      return {
        auto: isAuto,
        callback: this.downCallback
      };
    },
    // mescroll上拉加载的配置
    getMescrollUp(tabIndex) {
      let that = this;
      let emptyWarpId = "dataList" + tabIndex;
      return {
        auto: false,
        callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
        page: {
          num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
          size: 12 //每页数据条数,默认10
        },
        htmlNodata: '<p class="upwarp-nodata">-- END --</p>',
        noMoreSize: 4, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
        empty: {
          warpId: emptyWarpId, // 父布局的id;
          icon: require("../images/b_5.png"), // 图标,默认null
          tip: "暂无相关数据~", // 提示
          btntext: "去逛逛 >", // 按钮,默认""
          btnClick: function() {
            // 点击按钮的回调,默认null
            that.$router.push({ name: "Home" });
          }
        },
        lazyLoad: {
          use: true
        }
      };
    },
    // mescroll初始化的回调
    mescrollInit(tabIndex, arg) {
      this.tabs[tabIndex].mescroll = arg[0]; // 传入mescroll对象
      this.tabs[tabIndex].mescroll.tabIndex = tabIndex; // 加入标记,便于在回调中取到对应的list
    },
    // 切换菜单
    changeTab(tabIndex) {
      if (tabIndex == 2) {
        this.top_left = true;
      } else {
        this.top_left = false;
      }
      if (this.curIndex === tabIndex) return; // 避免重复调用
      let curTab = this.tabs[this.curIndex]; // 当前列表
      let newTab = this.tabs[tabIndex]; // 新转换的列表
      curTab.mescroll && curTab.mescroll.hideTopBtn(); // 隐藏当前列表的回到顶部按钮
      this.curIndex = tabIndex; // 切换菜单
      this.mySwiper_banner.slideTo(tabIndex);
      // 菜单项居中动画
      if (curTab.mescroll) {
        let tabsContent = this.$refs.tabsContent;
        let tabDom = tabsContent.getElementsByClassName("tab")[tabIndex];
        let star = tabsContent.scrollLeft; // 当前位置
        let end =
          tabDom.offsetLeft +
          tabDom.clientWidth / 2 -
          document.body.clientWidth / 2; // 居中
        this.tabScrollLeft = end;
        curTab.mescroll.getStep(star, end, function(step) {
          tabsContent.scrollLeft = step; // 从当前位置逐渐移动到中间位置,默认时长300ms
        });
      }
      if (newTab.mescroll) {
        if (!newTab.isListInit) {
          // 加载列表
          newTab.mescroll.triggerDownScroll();
        } else {
          // 检查新转换的列表是否需要显示回到到顶按钮
          setTimeout(() => {
            let curScrollTop = newTab.mescroll.getScrollTop();
            if (curScrollTop >= newTab.mescroll.optUp.toTop.offset) {
              newTab.mescroll.showTopBtn();
            } else {
              newTab.mescroll.hideTopBtn();
            }
          }, 30);
        }
      }
    },
    /* 下拉刷新的回调 */
    downCallback(mescroll) {
      // 这里加载你想下拉刷新的数据, 比如刷新tab1的轮播数据
      if (mescroll.tabIndex === 0) {
        // loadSwiper();
      } else if (mescroll.tabIndex === 1) {
        // ....
      } else if (mescroll.tabIndex === 2) {
        // ....
      }
      mescroll.resetUpScroll(); // 触发下拉刷新的回调,加载第一页的数据
    },
    /* 上拉加载的回调 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
    upCallback(page, mescroll) {
      // 这里加载你想下拉刷新的数据, 比如刷新tab1的轮播数据
      if (mescroll.tabIndex === 0) {
        // loadSwiper();
        // 推荐
        this.tabs[mescroll.tabIndex].isListInit = true; // 标记列表已初始化,保证列表只初始化一次
        // 推荐歌单接口有问题,用歌单接口代替
        //this.$store;
        // .dispatch("personalized/getPersonalizedData", {
        //   limit: page.size,
        //   offset: page.num
        // })
        this.$store
          .dispatch("playlist_cat/getPlaylistCatData", {
            limit: page.size,
            order: "hot",
            cat: "全部",
            offset: page.num
          })
          .then(
            data => {
              let curPageData = data.playlists;
              mescroll.endSuccess(curPageData.length); // 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
              if (page.num === 1) {
                this.tabs[mescroll.tabIndex].list = [];
                this.swiper_data = curPageData.slice(0, 3);
                curPageData = curPageData.slice(3);
              } // 如果是第一页需手动制空列表
              this.tabs[mescroll.tabIndex].list = this.tabs[
                mescroll.tabIndex
              ].list.concat(curPageData); // 追加新数据

              this.$nextTick(() => {
                this.mySwiper_banner2 = new Swiper(".swiper-container-m", {
                  // 轮播配置
                  observer: true, //修改swiper自己或子元素时，自动初始化swiper
                  observeParents: true, //修改swiper的父元素时，自动初始化swiper
                  effect: "coverflow",
                  nested: true,
                  grabCursor: true,
                  watchSlidesProgress: true,
                  centeredSlides: true,
                  loop: true,
                  loopedSlides: 2,
                  slidesPerView: 2,
                  // autoplay: {
                  //   delay: 3000, //自动播放速度
                  //   disableOnInteraction: false //鼠标移上去时是否还继续播放
                  // },
                  coverflowEffect: {
                    rotate: 0,
                    stretch: 0,
                    depth: 30,
                    modifier: 5,
                    slideShadows: false
                  }
                });
              });
            },
            data => {
              if (page.num === 1)
                this.tabs[mescroll.tabIndex].isListInit = false;
              mescroll.endErr(); // 联网失败的回调,隐藏下拉刷新的状态
            }
          );
      } else if (mescroll.tabIndex === 2) {
        // 精品
        this.tabs[mescroll.tabIndex].isListInit = true; // 标记列表已初始化,保证列表只初始化一次
        this.$store
          .dispatch("highquality/getHighqualityData", {
            limit: page.size,
            before: this.before,
            cat: this.catTag
          })
          .then(
            data => {
              this.before = data.lasttime;
              let curPageData = data.playlists;
              mescroll.endSuccess(curPageData.length); // 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
              if (page.num === 1) this.tabs[mescroll.tabIndex].list = []; // 如果是第一页需手动制空列表
              this.tabs[mescroll.tabIndex].list = this.tabs[
                mescroll.tabIndex
              ].list.concat(curPageData); // 追加新数据
            },
            data => {
              if (page.num === 1)
                this.tabs[mescroll.tabIndex].isListInit = false;
              mescroll.endErr(); // 联网失败的回调,隐藏下拉刷新的状态
            }
          );
      } else {
        this.tabs[mescroll.tabIndex].isListInit = true; // 标记列表已初始化,保证列表只初始化一次
        this.$store
          .dispatch("playlist_cat/getPlaylistCatData", {
            limit: page.size,
            order: "hot",
            cat: this.tabs[mescroll.tabIndex].name,
            offset: page.num
          })
          .then(
            data => {
              let curPageData = data.playlists;
              mescroll.endSuccess(curPageData.length); // 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
              if (page.num === 1) this.tabs[mescroll.tabIndex].list = []; // 如果是第一页需手动制空列表
              this.tabs[mescroll.tabIndex].list = this.tabs[
                mescroll.tabIndex
              ].list.concat(curPageData); // 追加新数据
            },
            data => {
              if (page.num === 1)
                this.tabs[mescroll.tabIndex].isListInit = false;
              mescroll.endErr(); // 联网失败的回调,隐藏下拉刷新的状态
            }
          );
      }
    }
  }
};
</script>
<style>
.playlist .mescroll-empty .empty-icon {
  margin: auto;
}
</style>
<style lang="scss" scoped>
.playlist {
  .main {
    .content {
      .header {
        z-index: 9990;
        position: fixed;
        top: 0.8rem;
        left: 0;
        width: 100%;
        line-height: 0.32rem;
        text-align: center;
        background-color: white;
        i.menu {
          position: absolute;
          top: 0;
          right: 0;
          width: 0.9rem;
          height: 98%;
          z-index: 100;
          background: url(../images/cas.png) no-repeat center;
          background-color: #fff;
          background-size: 50% 50%;
          box-shadow: -0.1rem 0rem 0.2rem #fff;
        }
        .tabs-warp {
          height: 0.84rem; /*高度比tabs-content小, 目的是隐藏tabs的水平滚动条*/
          overflow-y: hidden;
          border-bottom: 0.02rem solid #eee;
          box-sizing: content-box;
          .tab-bar {
            position: relative;
            height: 0.04rem;
            background-color: #ff2d0f;
            transition: left 300ms;
          }
          .tabs-content {
            width: 100%;
            height: 1rem;
            overflow-x: auto;
            .tabs {
              width: 100%;
              white-space: nowrap;
              .active {
                color: #ff2d0f;
              }
              li {
                display: inline-block;
                height: 0.8rem;
                line-height: 0.9rem;
                vertical-align: middle;
              }
            }
          }
        }
        .title {
          margin-top: 0.24rem;
        }
        .btn-left {
          position: absolute;
          top: 0;
          left: 0;
          padding: 0.24rem 0.24rem 0 0.24rem;
        }
      }
      .swiper-container-g {
        position: fixed;
        top: 1.62rem;
        left: 0;
        right: 0;
        bottom: 0;
        .boutique {
          overflow: hidden;
          line-height: 0.9rem;
          padding: 0 0.3rem;
          .left {
            float: left;
            span {
              font-size: 0.4rem;
              font-weight: 900;
              color: #333;
            }
          }
          .right {
            float: right;
            span {
              padding: 0.05rem 0.2rem;
              font-size: 0.28rem;
              color: #666;
              border: 0.02rem solid #ddd;
              border-radius: 2rem;
              b {
                font-weight: normal;
                vertical-align: middle;
              }
              i {
                background: url(../images/sx.png) no-repeat;
                background-size: 100% 100%;
                display: inline-block;
                width: 0.3rem;
                height: 0.3rem;
                vertical-align: middle;
                opacity: 0.5;
              }
            }
          }
        }
        .rec_swiper {
          .swiper-container-m {
            width: 92%;
            margin: auto;
            margin-top: 0.5rem;
            padding-bottom: 0.2rem;
            .swiper-wrapper {
              .swiper-slide-prev {
                opacity: 0.5 !important;
              }
              .swiper-slide-next {
                opacity: 0.5 !important;
              }
              .swiper-slide {
                background-color: #fff;
                box-shadow: 0.02rem 0.02rem 0.1rem #888888;
                border-radius: 0.2rem;
                .top {
                  position: relative;
                  img {
                    border-top-right-radius: 0.2rem;
                    border-top-left-radius: 0.2rem;
                    margin: auto;
                  }
                  i {
                    background: url(../images/bbb.png) no-repeat;
                    background-size: 100% 100%;
                    width: 0.9rem;
                    height: 0.9rem;
                    display: inline-block;
                    position: absolute;
                    bottom: 0;
                    right: 0;
                  }
                }
                .info {
                  padding: 0.2rem 0.2rem;
                  font-size: 0.28rem;
                  text-align: left;
                  color: #333;
                }
              }
            }
          }
        }
        ul {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          flex-wrap: wrap;
          padding: 0 0.25rem;
          padding-top: 0.4rem;
        }
      }
    }
  }
  header {
    width: 100%;
    height: 0.8rem;
    line-height: 0.8rem;
    left: 0rem;
    top: 0rem;
    background-color: #fff;
    overflow: hidden;
    position: relative;
    .left {
      position: absolute;
      top: 0.1rem;
      left: 0.2rem;
      height: 0.6rem;
      i {
        background: url(../images/axj.png) no-repeat;
        background-size: 100% 100%;
        width: 0.6rem;
        height: 0.6rem;
        display: inline-block;
      }
    }
    .center {
      font-size: 0.4rem;
      color: #333;
      text-align: left;
      padding-left: 1.2rem;
    }
  }
}
</style>